var data=null;//存储未来获取的数据
//注意，获取的cloumns是类数组，无法使用sort
//******将类数组，转换为数组的方法 Array.from(类数组)
var cloumns=Array.from(document.querySelectorAll(".cloumn"));//获取三列
var imgboxs=null;//渲染完成后再查找
var loadmore=document.getElementById("loadmore")//加载更多按钮

//1. 获取数据
function getData(){
   var xhr=new XMLHttpRequest;
   //文件路径，以html为基准找
   xhr.open("GET","data.json",false);
   xhr.onreadystatechange=function(){
      if(xhr.readyState===4&&xhr.status===200){
        data=JSON.parse(xhr.response)
      }
   }
   xhr.send();
}
getData()


//2.循环渲染
function render(){
    //2.1根据观察，发现数据，不适合直接渲染 数据图片宽度300,样式图片宽度240
    //修改数据
    var newData=data.map(item=>{
        //拿出每条数据的 height(433)和width(300)
        let {width:w,height:h}=item;
        item.width=240;//将240重新覆盖原来的width
        item.height=240*h/w;//重新覆盖原来的height
        return item;//返回覆盖原来的每一项
    })
    var groups=[];
    for(var i=0;i<newData.length;i+=3){//i=0, i=3, i=6
      //i=0  slice(i,i+3)  slice(0,3)  [0,1,2]
      //i=3  slice(i,i+3)  slice(3,6)  [3,4,5]
      //i=6  slice(i,i+3)  slice(6,9)  [6,7,8]
      groups=newData.slice(i,i+3);
      //console.log(groups);//[0,1,2]  [3,4,5]  [6,7,8]
      //每一组数据，从大到小排序（按照高度)
      groups.sort((a,b)=>{
         return b.height-a.height
      })
      //检查一下，每组数据的高度，是否是由大到小
      //console.log(groups);

      //按照每列的高度，排序 小中大
      cloumns.sort((a,b)=>{
        return a.offsetHeight-b.offsetHeight
      })

      //检查一下，每列数据的高度，是否是 小中大
      //console.log(cloumns);

       //groups: [大 中 小]
       //cloumns:[小 中 大]
       //已经排好顺序，只需要按照索引下标插入就可以
       groups.forEach((item,index) => {
           let {id,pic,title,link,height,width}=item;
           let str=`<div class="item" data-id="${id}">
               <a href="${link}"> 
                  <div class="imgbox" style="height:${height}px;width:${width}px">
                      <img src="" data-src="${pic}" style="height:${height}px;width:${width}px">
                  </div>
                  <p>${title}</p>
                </a> 
            </div>`;
            cloumns[index].innerHTML+=str;
       });

    }
    //最后
    imgboxs=Array.from(document.querySelectorAll(".imgbox"));
    
}
render()

//3.功能----瀑布流效果
function handle(){
   //加载图片
    function showimg(img){
      var dataSrc=img.getAttribute("data-src");
      var newimg=new Image();
      newimg.src=dataSrc;
      newimg.onload=function(){
         img.src=dataSrc;
         //img.removeAttribute("data-src");
         newimg=null;
         img.flag=true;
      }
    }
   //创建监控器
    let ob=new IntersectionObserver((changes)=>{
        //changes 是一个数组，里面有51个内容
         //console.log(changes)
         //循环判断51个内容的状况
         changes.forEach((change)=>{
          //console.log(change)
           if(change.isIntersecting){
             //console.log(change.target)
              //目标元素的里面，有(img)，找到对应元素，小面的图片传递进去
              var img=change.target.querySelector("img");
              if(img.flag){
                 ob.unobserve(change.target)//取消盒子的监控
                 return;
              }
              //先做6个图片的加载
              showimg(img)
           }
         }) 
    },{
      threshold:[1]
    })

    //循环监控 51 个盒子
    imgboxs.forEach((imgbox)=>{
      ob.observe(imgbox)
    })
}
handle()

//4.功能----加载更多
var count=0;
function loadmoreimg(){
   var obload=new IntersectionObserver(changes=>{
      if(changes[0].isIntersecting){
        count++;
        if(count>3){//加载次数大3的时候，停止加载更多
          obload.unobserve(loadmore);
          loadmore.innerHTML="加载已完成";
          return
        }
        getData();
        render();
        handle();
      }
   },{
    threshold:[0.5]
   })

   obload.observe(loadmore)
}
loadmoreimg()




